<h3 class="mb-4">Overall performance</h3>

<div *ngIf="esgOverallPerformanceSummary && currentClusters" class="d-flex flex-row align-items-stretch shadow">
    <div class="card left-card w-50" [ngClass]="{'stacked-card': researchType === 'comprehensive'}">
        <div class="card-body pb-3">
            <h5>ESG Rating</h5>

            <span class="current-rating">{{ esgOverallPerformanceSummary.overall.score }}</span>
            <span class="max-rating">/100</span>
            <span class="current-assessment">{{ esgOverallPerformanceSummary.overall.esgPosition.name }}</span>

            <div intervalChart [chartID]="'intervalchart'" [companyCode]="esgOverallPerformanceSummary.overall.esgPosition.id" [arrowPositionY]="-7"
                [currentValue]="esgOverallPerformanceSummary.overall.score" [clusters]="currentClusters" style="position: relative;">
                <div id="intervalchart"></div>
                <div id='intervalchartAxis' style="height: 12px; margin-top: -20px;"></div>
            </div>
            <div *ngIf="esgOverallPerformanceSummary.lastUpdate != null" class="small mt-4">Last update: {{esgOverallPerformanceSummary.lastUpdate | date:'mediumDate'}}</div>
        </div>
    </div>

    <div class="card right-card w-50" [ngClass]="{'stacked-card': researchType === 'comprehensive'}">
        <ul *ngIf="researchType === 'comprehensive'" class="list-group list-group-flush">
            <li *ngFor="let theme of ['environment','social','governance']" [routerLink]="['../', theme]" class="list-group-item pointer">
                <div class="card-body pillar-summary">
                    <div class="row d-flex align-items-baseline">
                        <div class="col-4">{{ theme | titlecase }}</div>
                        <div class="col-5">
                            <span class="pillar-assessment">{{ esgOverallPerformanceSummary[theme].esgPosition?.name }}</span>
                        </div>
                        <div class="col-3">
                            <span class="pillar-current-rating">{{ esgOverallPerformanceSummary[theme].score }}</span>
                            <span class="pillar-max-rating">/100</span>
                        </div>
                    </div>
                    <div class="weight">Weight: {{ esgOverallPerformanceSummary[theme].weight | percent:'1.0-0' }}</div>
                </div>
            </li>
        </ul>

        <div *ngIf="researchType === 'core' && esgHistoricalPerformanceSummary">
            <div class="pr-3">
                <div linearChart [chartID]="'historicalPerformanceOverallChart'" [chartData]="overallChartData" [showCategoryNames]="false"
                    [showLegend]="true" class="row">
                    <div id="historicalPerformanceOverallChart" style="height:200px; width:100%;"> </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div *ngIf="researchType === 'comprehensive' && esgHistoricalPerformanceSummary" class="card-group shadow">
    <div class="card card-body bottom-card">
        <div linearChart [chartID]="'historicalPerformanceOverallChart'" [chartData]="overallChartData" [showCategoryNames]="false"
            [showLegend]="true" class="row">
            <div id="historicalPerformanceOverallChart" style="height:200px; width:100%;"> </div>
        </div>
    </div>
</div>

<div *ngIf="esgOverallPerformanceSummary && esgRelativePosition">
    <h3 class="mt-5">Relative Performance</h3>
    <div class="card shadow card-body">
        <div class="row">
            <div *ngIf="researchType === 'comprehensive'" class="col-6">
                <h5>Relative Position</h5>
                <span class="pillar-current-rating">{{ esgOverallPerformanceSummary.relative.comparativeGroupRank }}</span>
                <span class="pillar-max-rating">/{{ esgOverallPerformanceSummary.relative.comparativeGroupSize }}</span>
                <div class="small mb-4">{{ esgOverallPerformanceSummary.relative.esgPosition.name }}</div>
            </div>
            <div class="col-6">
                <h5>Percentile</h5>
                <span class="pillar-current-rating">{{ esgOverallPerformanceSummary.percentile.comparativeGroupPercentileRank }}{{ getPercentileOrdinal() }}</span>
                <div class="small mb-4">{{ esgOverallPerformanceSummary.percentile.esgPosition.name }}</div>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <div class="d-flex mb-2">
                    <div class="mr-auto bold">Top 5 companies</div>
                    <div class="ml-auto pr-3">Score</div>
                </div>
                <ul *ngFor="let company of esgRelativePosition.topList ; let i = index;" class="list-group">
                    <li class="list-group-item d-flex relative-item">
                        <div class="mr-auto">{{ i + 1 }}. {{ company.companyName }}</div>
                        <div class="ml-auto">{{ company.score | number:'1.0-0' }}</div>
                    </li>
                </ul>
            </div>
            <div class="col-6">
                <div class="d-flex mb-2">
                    <div class="mr-auto bold">Peers (Market cap ${{ esgRelativePosition.marketCapRangeFrom | number:'1.0-1' }} - ${{ esgRelativePosition.marketCapRangeTo
                        | number: '1.0-1' }}bn)</div>
                    <div class="ml-auto pr-3">Score</div>
                </div>
                <ul *ngFor="let company of esgRelativePosition.peersList ; let i = index;" class="list-group">
                    <li class="list-group-item d-flex relative-item">
                        <div class="mr-auto">{{ i + 1 }}. {{ company.companyName }}</div>
                        <div class="ml-auto">{{ company.score | number:'1.0-0' }}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h3 class="mt-5">Qualitative performance - Controversies</h3>
<controversy-summary [companyId]="companyId" [incidents]="indicators"></controversy-summary>